<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>上傳學習單</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">
<!-- tag -->
<link rel="stylesheet" type="text/css" href="css/jquery.tagsinput.css" />

<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<body  class="membernav">
	<div id="page">
		<div class="header FixedTop addPageHeader">
			<a href="#menu" class="headericon"></a>
			<a href="memberWorksheet?id=${loginMember.memberNO}" class="titleLink">會員上傳中心 - 上傳學習單</a>
		</div><!-- header -->
		<div class="content clearfix">
			<div class="addPageLink">
				<div class="container">
					<!-- <div class="prefix_1 suffix_1 grid_10"> -->
					<div class="grid_12">
						<ul class="topnav">
							<li><a href="addCourseCont">上傳課程</a></li>
							<li><a href="addDesignCont">上傳作品</a></li>
							<li><a href="addWorksheetCont" class="current">上傳學習單</a></li>
							<li><a href="addResourceCont">上傳設計資源</a></li>
							<!-- <li><a href="activityList.html">建立活動</a></li> -->					
						</ul>
					</div>
				</div>
			</div>				
			<div class="addPage">
			<div class="container">
				<!-- <div class="prefix_1 suffix_1"> -->
				<div>
					<form id="sendForm" method="post" action="addWorksheet">
						<input type="hidden" name="worksheet.status" id="status" value="1">
						<input type="hidden" name="worksheet.categoryID" id="cid1" value="${category1[0].id}">
						<input type="hidden" name="worksheet.tags" id="tags">

						<div class="grid_6">							
							<label><strong>類型:</strong></label>
							<ul class="list-screen-condition">
								<li class="screen-condition">
									<a class="cond-down" href="javascript:;">
									<span class="cond-value">${category1[0].name}</span>
									<i></i>
									</a>
									<ul id="c1">
										<c:forEach items="${category1}" var="category1" varStatus="i">
											<li class="list-item">
												<a href="javascript:;" data-id="${category1.id}">${category1.name}</a>
											</li>
										</c:forEach>
									</ul>
								</li>
							</ul>
							
							<label>
								<strong>標題:<span id="msg1"></span></strong>
								<input type="text" class="txt" name="worksheet.title" placeholder="取個有吸引力的標題" maxlength="30">
							</label>

							<label>
								<strong>簡介:<span id="msg2"></span></strong>
								<textarea cols="30" rows="10" name="worksheet.content"></textarea>
							</label>
							<label><strong>標籤:</strong></label>
							<input id="tags_1" type="text" class="tags">
								
							<ul class="tag">
								<c:forEach items="${tag}" var="tag" varStatus="i">
									<li><a href="javascript:;"><span>${tag.tag}</span></a></li>
								</c:forEach>
							</ul>


						</div><!-- grid_5 -->

						<div class="grid_6">
							<input type="button" class="btn_con1" id="addCont" value="新增學習連結">
							<div id="contentArea">
								<label class="label_con2">
									<strong>連結1</strong>
									<input type="text" class="txt_con1 contTitle" name="contentList[0].title" placeholder="標題" maxlength="30">
									<input type="text" class="txt_con1 contUrl" name="contentList[0].url" placeholder="網址" maxlength="100">
									<textarea cols="30" rows="10" class="contContent" name="contentList[0].content" placeholder="簡短描述"></textarea>
									<input type="button" class="btn_con2 clearfix deleteBtn" value="刪除連結">
								</label>
							</div>
							<ul class="btnGroup">
								<li><input type="button" id="send" class="btn" value="發佈"></li>
								<li><a href="worksheet"><input type="button" class="btn btn_chg2" value="取消"></a></li>
							</ul>
						</div><!-- grid_4 -->

					</form>
				</div><!-- prefix_1 suffix_1 -->
			</div><!-- container -->
		</div><!-- addPage -->
			<!--結束!!!!!!我們的網頁內容~從header導覽列開始都貼進來-->
		</div><!-- content -->
		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach>
 				<li class="menumember">hi, ${loginMember.name}</li>
				<li class="menumember"><a href="aboutme?id=${loginMember.memberNO}"><img src="images/aboutme.png">關於我</a></li>
				<li class="menumember"><a href="memberCourse?id=${loginMember.memberNO}"><img src="images/mycreation.png">我創作</a></li>
                <li class="menumember"><a href="collectCourse?id=${loginMember.memberNO}"><img src="images/mystar.png">我收藏</a></li>
				<li class="menumember"><a href="logout">登出</a></li>
			</ul>
		</nav>
	</div><!-- page -->
	
	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		
	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>

	<script type="text/javascript" src="js/jquery.tagsinput.js"></script>
	<!-- To test using the original jQuery.autocomplete, uncomment the following -->
	<!-- validate -->
    <script src="js/jquery.validate.js"></script>
    <script src="js/messages_zh_TW.js"></script>
    <script src="js/additional-methods.js"></script>
	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
	
	<script type="text/javascript">
		$(function() {
			var count = 1;
			var total = 1;
			$('nav#menu').mmenu();
			$('.list-screen-condition li').hover(function(){
				var $this = $(this);
				$this.find('ul').show();
				$this.find('.cond-down').addClass('cond-down-hover');
				$this.find('.list-item a').click(function(){
					var condVal = $(this).text();
					$this.find('.cond-value').text(condVal);
					$this.find('.list-item a').removeClass('selected');
					$(this).addClass("selected");
					$this.find('ul').hide();
					$this.find('.cond-down').removeClass('cond-down-hover');
				});
			},function(){
				var $this = $(this);
				$this.find('ul').hide();
				$this.find('.cond-down').removeClass('cond-down-hover');
			});
			
			$('#tags_1').tagsInput({width:'auto'});
			
			$("#sendForm").validate({
				rules:{
					"worksheet.title":"required",
					"worksheet.content":"required",
					"contentList[0].title":"required",
					"contentList[0].url":"required",
					"contentList[0].content":"required"
				},
				messages:{
					"worksheet.title":"請填寫標題",
					"worksheet.content":"請填寫內容",
					"contentList[0].title":"請填寫標題",
					"contentList[0].url":"請填寫連結",
					"contentList[0].content":"請填寫內容"
				},
				errorPlacement: function (error, element) {
	    	    	if(element.attr('name') == "worksheet.title"){
	    	            $("#msg1").append(error);
	    	    	}
	    	    	else if(element.attr('name') == "worksheet.content"){
	    	            $("#msg2").append(error);
	    	    	}
	    	    	else
	    	    		error.insertBefore(element);
	    	    },
	    	    invalidHandler: function(event, validator) {
	    	    	$("#send").attr("disabled", false);
	    	    },
			});
			
			$("#send").click(function(){
				$("#send").attr("disabled", true);
				var tags = $("#tags_1_tagsinput>.tag").find("span").text();
				var tagsList = tags.split("\u00A0\u00A0");
				$("#tags").val(tagsList);
				$("#sendForm").submit();
				
			});
			
			$("#addCont").click(function(){
				count++;
				total++;
				var str = '';
				str += '<label class="label_con2">';
				str += '<strong>連結'+count+'</strong>';
				str += '<input type="text" class="txt_con1 contTitle" name="contentList['+count+'].title" placeholder="標題" maxlength="30">';
				str += '<input type="text" class="txt_con1 contUrl" name="contentList['+count+'].url" placeholder="網址" maxlength="100">';
				str += '<textarea cols="30" rows="10" class="contContent" name="contentList['+count+'].content" placeholder="簡短描述"></textarea>';
				str += '<input type="button" class="btn_con2 clearfix deleteBtn" value="刪除連結">';
				str += '</label>';
				$("#contentArea").prepend(str);
				addContent();
			});
			
			$("#contentArea").on("click",".deleteBtn",function(){
				if(total > 1){
					$(this).closest("label").remove();
					total--;
				}
				else
					alert("不可刪除最後一筆");
			});
			
			$('#c1 .list-item a').click(function(){
				$("#cid1").val($(this).attr("data-id"));
				getTag($(this).attr("data-id"));
			});
			$(".tag").on("click","li",function(){
				var tags = $("#tags_1_tagsinput>.tag").find("span").text();
				var tagsList = tags.split("\u00A0\u00A0");
				var flag = true;
				for(var i=0; i<tagsList.length; i++){				
					if(tagsList[i].match($(this).text()) != null)
						flag = false;
				}
				if(flag){
					$("#tags_1_tag").attr("class","");
					$("#tags_1_tag").attr("data-default","輸入標籤新增");
					$("#tags_1_tag").val("輸入標籤新增");
					$("#tags_1").addTag($(this).text(),{focus:true,unique:true});
					$(this).remove();				
				}
				else{
					$("#tags_1_tag").attr("data-default","標籤名稱重複");
					$("#tags_1_tag").val("標籤名稱重複");
					$("#tags_1_tag").attr("class","not_valid");
				}
				
			});
		});
		
		function getTag(c1){
			$.ajax({
				url:"getWorksheetTag",
				data:{
					categoryID:c1
				},
				dataType:"json",
				success:function(result){
					$(".tag").find("li").remove();
					for(var i=0; i<result.length; i++){
						$("ul.tag").append('<li><a href="javascript:;"><span>'+result[i].tag+'</span></a></li>');
					}
				}
			});
		}
		
		function addContent(){
			$("#contentArea").find("label").eq(0).find(".contTitle").rules("add",{
				required:true,
				messages:{
					required:"請填寫標題"
				}
			});
			
			$("#contentArea").find("label").eq(0).find(".contUrl").rules("add",{
				required:true,
				messages:{
					required:"請填寫連結"
				}
			});
			
			$("#contentArea").find("label").eq(0).find(".contContent").rules("add",{
				required:true,
				messages:{
					required:"請填寫內容"
				}
			});
		}
	</script>
</body>
</html>